import { ConnectButton } from "@rainbow-me/rainbowkit";
import type { NextPage } from "next";
import Head from "next/head";
import styles from "../styles/Home.module.css";
import { useAccount, useBalance } from "wagmi";
import NetworkSwitcher from "../components/Switcher";
import SendETH from "../components/SendETH";
import MintNFT from "../components/MintNFT";

function Info() {
  const { address } = useAccount();
  const { data, error } = useBalance({ address });
  return (
    <div className={styles.info}>
      {address && <div>Address: {address}</div>}
      {data && (
        <div>
          Balance: {data.formatted} {data.symbol}
        </div>
      )}
      {error && <div>Error: {error.message}</div>}
    </div>
  );
}

const Home: NextPage = () => {
  return (
    <div className={styles.container}>
      <Head>
        <title>RainbowKit App</title>
        <meta content="Generated by @rainbow-me/create-rainbowkit" name="description" />
        <link href="/favicon.ico" rel="icon" />
      </Head>

      <main className={styles.main}>
        <ConnectButton />
        <Info />
        <NetworkSwitcher />
        <SendETH />
        <MintNFT />
      </main>

      <footer className={styles.footer}>
        <a href="https://rainbow.me" rel="noopener noreferrer" target="_blank">
          Made with ❤️ by your frens at 🌈
        </a>
      </footer>
    </div>
  );
};

export default Home;
